"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/12/27
 */
import * as React from 'react'
import {commonProps, commonStyles} from "../../assets/styles/common";
import Colors from "../../assets/styles/Colors";
import NavBackButton from "../../component/BackButton";
import NavRightButton from "../../component/RightButton";
import MyText from "../../component/MyText";
import T from "../../utils/T";
import {SCREEN_WIDTH} from "../../constant";
import {MeetingDescriptionPage} from "../../interface/router";

const {View, TextInput, Keyboard, Animated} = require('react-native');
const NavigationBar = require('react-native-navbar').default;
const {Actions} = require("react-native-router-flux");
const {connect} = require('react-redux');

class Page extends React.Component<MeetingDescriptionPage, any> {
    keyboardDidShowListener: any;
    keyboardDidHideListener: any;
    input: any;
    static defaultProps = {

        callBack: () => {
        },
        value: ''
    };
    state = {
        bottom: new Animated.Value(0),
        count: 0
    };

    componentWillMount() {
        
        this.keyboardDidShowListener = Keyboard.addListener('keyboardWillShow', this._keyboardWillShow);
        this.keyboardDidHideListener = Keyboard.addListener('keyboardWillHide', this._keyboardWillHide);
    }

    componentWillUnmount() {
        this.keyboardDidShowListener.remove();
        this.keyboardDidHideListener.remove();
    }

    _keyboardWillShow = (props) => {

        const {height} = props.endCoordinates;


        Animated.timing(
            this.state.bottom,
            {
                toValue: height,
                duration: 240,
            }
        ).start();
    };
    _keyboardWillHide = () => {

        Animated.timing(
            this.state.bottom,
            {
                toValue: 0,
                duration: 200,
            }
        ).start();
    };

    onChange = ({nativeEvent: {text}}) => {
        this.setState({count: text ? text.length : 0})
    };

    onFinish = () => {
        this.props.callBack(this.input._lastNativeText ? this.input._lastNativeText : '');
        Actions.pop();
    };

    render() {
        return (
            <View style={[commonStyles.container]}>
                <NavigationBar {...commonProps.navBar}
                               title={{title: '说明', tintColor: Colors.White}}
                               rightButton={<NavRightButton onPress={this.onFinish}>
                                   <MyText color={Colors.Active} fontSize={14}>{T('Done')}</MyText>
                               </NavRightButton>}
                               leftButton={<NavBackButton/>}
                />
                <TextInput style={[commonStyles.flex1,
                    {
                        fontSize: 16,
                        color: Colors.Title, padding: 5
                    }]}
                           ref={ref => this.input = ref}
                           multiline
                           defaultValue={this.props.value}
                           onChange={this.onChange}
                           maxLength={2000}
                           numberOfLines={0}/>
                <Animated.View style={[
                    commonStyles.flexRow,

                    commonStyles.absolute,
                    {
                        left: 0,
                        bottom: this.state.bottom,
                        justifyContent: 'flex-end',
                        width: SCREEN_WIDTH,
                        padding: 5,
                    }
                ]}>
                    <MyText color={Colors.SubTitle} fontSize={18}
                            fontWeight={'500'}>{`${this.state.count}/2000`}</MyText>
                </Animated.View>
            </View>
        );
    }
}


export default Page;